<template>
  <view class="content">
    <view class="headerImg">
      <view class="headerBox">
        <view class="setUp" :style="'padding-top:' + statusBarHeight + 'px;'" @tap="gotopriv">
          <text class="icon">&#xe7ef;</text>
          <text>设置</text>
        </view>
        <view class="avatorView">
          <view @tap="goinform" class="avator">
            <image :src="avatar">
            </image>
          </view>
          <view v-if="user" @tap="goinform" class="Soda">
            {{ user }}
          </view>
          <view v-else @tap="goLogin" class="Soda">
            请登录
          </view>
        </view>
      </view>
    </view>
    <view class="clasity">
      <view class="" v-for="(item, index) in list" :key="index" @tap="goclasity(index)">
        <view class="" style="color:#999999;font-size: 28rpx;margin-bottom: 12rpx;">
          {{ item.num }}
        </view>
        <view class="">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="status">
      <view class="statusTab">
        <view style="display: flex;align-items: center;justify-content: center;flex-direction: column;" class=""
          v-for="(item, index) in statusList" :key="index" @tap="goEvaluate(index)">
          <image class="" style="width: 32rpx; height: 32rpx; margin-bottom: 16rpx;" :src="item.icon"></image>
          <view class="">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="barBg">
      <view class="barBgItem">
        <view class="barBgAll" v-for="(item, index) in barList" :key="index" @tap="goaddress(index)">
          <view class="barBgLeft">
            <!-- <view style="width: 32rpx; height: 32rpx;">			
						</view> -->
            <image class="" style="width: 32rpx; height: 32rpx;" :src="item.icon"></image>
            <view class="">{{ item.name }}</view>
          </view>
          <view class="barRight">
            &gt;
          </view>
        </view>
      </view>
    </view>
    <u-modal v-model="customer" :show-title='false' :show-confirm-button='false'>
      <view style="width: 100%; height: 80%; position: relative; text-align:center; padding:50rpx 0;">
        <view style="color: #8a8a8a; font-size:24rpx;">客服电话</view>
        <view style="margin-top: 20rpx; font-size:44rpx; font-weight:bold;">022-2282-6900</view>
        <div @tap="confirmLogout"
          style="width: 304rpx; height:80rpx; color: #fff; background: #D12C25; margin: 50rpx 150rpx 0; text-align:center; line-height:80rpx; border-radius:198rpx;">
          <text>一键拨号</text>
        </div>
      </view>
      <view class=""
        style=" width: 536rpx; color: #D12C25; height: 50rpx; position: fixed; bottom: 355rpx; left: 350rpx;">
        <image style="width: 48rpx; height: 48rpx;" src="../../static/image/pagesMine/gram.png" mode="" @tap="ShutDown">
        </image>
      </view>
    </u-modal>
    <!-- <u-picker mode="region" v-model="status"></u-picker> -->
    <!-- <button @tap="goaddress">获取地址</button> -->
    <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE" :style="'margin-top:' + statusBarHeight + 'px;'"></ykAuthpup>
  </view>
</template>

<script>
import { selectFavoriteMerchant, selectUser } from '@/api/main'
import { selectEvaluateUserCount } from '@/api/common'
import ykAuthpup from '@/components/yk-authpup/yk-authpup.vue'
export default {
  components: {
    ykAuthpup
  },
  data() {
    return {
      username: '',
      user: '',
      // status:true,
      list: [
        {
          num: "0",
          name: "收藏店铺"
        },
        {
          num: "0",
          name: "累计评价"
        }
      ],
      statusList: [
        {
          icon: "../../static/image/pagesMine/due.png",
          name: "待支付"
        },
        {
          icon: "../../static/image/pagesMine/Remain.png",
          name: "进行中",
        },
        {
          icon: "../../static/image/pagesMine/Done.png",
          name: "待评价"
        },
        {
          icon: "../../static/image/pagesMine/refund.png",
          name: "退款"
        }
      ],
      barList: [
        {
          icon: "../../static/image/pagesMine/address.png",
          name: "我的地址"
        },
        {
          icon: "../../static/image/pagesMine/Phonebook.png",
          name: "手机号"
        },

        {
          icon: "../../static/image/pagesMine/About.png",
          name: "关于我们"
        },
        {
          icon: "../../static/image/pagesMine/share.png",
          name: "联系客服"
        }
      ],
      statusBarHeight: 0,
      avatar: "../../static/image/pagesMine/user.png",
      username: '未命名',
      customer: false,
    }
  },
  onReady() {
  },
  onShow() {
    if (uni.getStorageSync('token')) {
      this.getlist()
      this.getcomment()
      this.getuser()
    }
    console.log("获取列表")
  },
  onLoad() {
    this.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', this.statusBarHeight);
  },
  methods: {
    // goaddress(){
    // 	console.log(1);
    // 	uni.navigateTo({ url: '/pagesMine/mineAddress' })
    // },
    // 收藏店铺
    getlist() {
      selectFavoriteMerchant().then(res => {

        this.list[0].num = res.data.total
      })
    },
    //获取评价总数
    getcomment() {
      selectEvaluateUserCount().then(res => {
        console.log('看看评论总数', res)
        this.list[1].num = res.data
      })
    },
    //获取用户信息
    getuser() {
      selectUser().then(res => {
        console.log('用户信息', res)
        this.user = res.data.userName
        if (res.data.icon) {
          this.avatar = res.data.icon
        } else {
          this.avatar = "../../static/image/pagesMine/user.png"
        }
      })
    },
    //收藏/评价
    goclasity(index) {
      if (index === 0) {
        uni.navigateTo({ url: '/pagesMine/Collection' })
      } else if (index === 1) {
        console.log(1111)
        uni.navigateTo({ url: '/pagesMine/appraiseAll' })
      }

    },
    // 订单中心
    goEvaluate(index) {
      if (index === 0) {
        uni.navigateTo({ url: '/pagesMine/Evaluate?id=' + 1 })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pagesMine/Evaluate?id=' + 2 })
      }
      else if (index === 2) {
        uni.navigateTo({ url: '/pagesMine/Evaluate?id=' + 3 })
      }
      else if (index === 3) {
        uni.navigateTo({ url: '/pagesMine/Evaluate?id=' + 4 })
      }
    },
    // 地址
    goaddress(index) {
      if (index === 0) {
        uni.navigateTo({ url: '/pagesMine/mineAddress?checkshow=false' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pagesMine/handoffIphone' })
      } else if (index === 2) {
        // uni.navigateTo({ url: '/pages/webView/webview?name=规则中心&url=http://124.70.14.193:8020/webview/' })
        uni.navigateTo({ url: '/pagesMine/aboutUs' })
      } else if (index === 3) {
        this.customer = true
      }
    },
    gotopriv() {
      uni.navigateTo({ url: '/pagesMine/Privacysettings' })
    },
    goinform() {
      console.log('11111111111111')
      uni.navigateTo({
        url: '/pagesMine/Information?avatar=' + this.avatar + '&user=' + this.user

      })
    },
    goLogin() {
      uni.navigateTo({
        url:'/pages/login/login'
      })
    },
    changeAuth(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
      this.customer = false
      uni.makePhoneCall({
        phoneNumber: '02222826900'
     });
		},
    confirmLogout() {
        this.$refs['authpup'].open();
    },
    ShutDown() {
      this.customer = false
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background-color: #F5F5F5;
  height: 100vh;

  .headerImg {
    .headerBox {
      padding: 0 32rpx;

      .setUp {
        width: 100%;
        // padding-top: 40rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .avatorView {
        display: flex;
        margin-top: 52rpx;

        .avator image {
          width: 136rpx;
          height: 136rpx;
          border-radius: 50%;
        }

        .Soda {
          margin-top: 26rpx;
          margin-left: 32rpx;
          font-weight: Bold;
          font-size: 48rpx;
          color: #000;
        }
      }
    }
  }

  .clasity {
    margin-top: 28rpx;
    width: 100%;
    display: flex;
    padding: 0 32rpx;
    justify-content: space-around;
    text-align: center;
    align-items: center;
  }

  .status {
    padding: 0 32rpx;

    .statusTab {
      padding: 0 32rpx;
      height: 152rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 24rpx;
      background-color: #fff;
      border-radius: 8rpx;
    }
  }

  .barBg {
    padding: 0 32rpx;
    margin-top: 24rpx;

    .barBgItem {
      background-color: #fff;
      border-radius: 8rpx;

      .barBgAll {
        display: flex;
        border-bottom: solid 1px #E6E6E6;
        height: 96rpx;
        line-height: 96rpx;
        justify-content: space-between;
        margin: 0 32rpx;

        .barBgLeft {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100rpx;

          image {
            margin-right: 10rpx;
          }

        }

        .barRight {
          color: #999999;
        }
      }
      .barBgAll:nth-child(4) {
        border-bottom:none !important;
      }

    }
  }
}
</style>
